<template>
	<view>
		<view class="search-container">
			<view class="bt-block ">
				<bg-cell2 :border="false">
					<template slot="label">
						<view>项目名称 </view>
					</template>
					<template slot="value">
						<bg-select :value.sync="projectId" :columns="projectList" key="project"
							@select-change="selectChange"></bg-select>
					</template>
				</bg-cell2>
			</view>

			<view class="bt-block"
				style="display: flex;align-items: center;justify-content: space-between;padding:15px 12px;box-sizing: border-box;">
				<view>姓名 </view>
				<view>
					<u-input border="none" inputAlign="right" v-model="userName" placeholder="请输入姓名" />

				</view>


			</view>
		</view>

		<view class="status-tabs">
			<view class="status-tab" :class="{ 'active': activeStatus == '1' }" @click="changeStatus('1')">
				已完成
			</view>
			<view class="status-tab" :class="{ 'active': activeStatus == '2' }" @click="changeStatus('2')">
				未完成
			</view>
		</view>

		<view class="study-list" v-if="studyList.length > 0">
			<bg-cell2 v-for="(item, index) in studyList" :key="index" :showArrow="true">
				<template slot="label">
					<view class="item-content">
						<text class="tag">[{{ item.workJobType }}]</text>
						<text class="name">{{ item.userName }}</text>
						<text class="id">({{ item.idCardNo }})</text>
					</view>
				</template>
			</bg-cell2>
		</view>

		<u-empty v-else></u-empty>
	</view>
</template>

<script>
	import {
		trainingStatus,
		superTrainingStatus
	} from "@/api/system/study"

	export default {
		data() {
			return {
				projectId: '',
				projectName: '',
				projectList: [],
				userName: '',
				activeStatus: '1',
				studyList: [],
				type: ''
			};
		},
		mounted() {
			this.$store.dispatch("types/getProjects").then(res => {
				this.projectList = res
			})
		},
		onLoad(options) {
			if (options.projectId && options.type) {
				this.projectId = options.projectId;
				this.type = options.type;
				uni.setNavigationBarTitle({
					title: '安全培训考试'
				})
				this.searchData();
			} else if (options.projectId) {
				this.projectId = options.projectId;
				this.searchData();
			}
		},
		methods: {
			async searchData() {
				this.studyList = []
				if (!this.projectId) {
					uni.showToast({
						title: '请先选择项目',
						icon: 'none'
					});
					return;
				}
				// 等于super 则调用superTrainingStatus（高级管理员查看学习记录） 否则调用trainingStatus
				if (this.type == 'super') {
					let res = await superTrainingStatus({
						projectId: this.projectId,
						name: this.userName,
						status: this.activeStatus
					});
					if (res.code === 200) {
						this.studyList = res.data
					}
				} else {
					let res = await trainingStatus({
						projectId: this.projectId,
						name: this.userName,
						status: this.activeStatus
					});
					// 根据实际API返回数据格式处理
					if (res.code === 200) {
						this.studyList = res.data
					}
				}

			},
			changeStatus(status) {
				this.activeStatus = status;
				this.searchData();
			},
			selectChange(e) {
				console.log(e);
				this.projectId = e.value[0].value;
				this.searchData();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.header-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		padding: 20rpx 0;
	}

	.search-container {
		background-color: #fff;
		padding: 20rpx 30rpx;

		.input-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.select-box,
		.input-box {
			margin-bottom: 20rpx;
		}

		.arrow-icon {
			color: #999;
		}
	}

	.status-tabs {
		display: flex;
		background-color: #fff;
		margin-top: 20rpx;
		border-bottom: 1px solid #eee;

		.status-tab {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			position: relative;

			&.active {
				color: #C80000;
				font-weight: bold;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40%;
					height: 4rpx;
					background-color: #C80000;
				}
			}
		}
	}

	.study-list {
		background-color: #fff;
		margin-top: 2rpx;

		.item-content {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;

			.tag {

				color: #ee3636;


			}

			.name {
				color: #343434;
			}

			.id {
				font-size: 26rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}
	}

	// ::v-deep .uni-input-input {
	// 	width: 200rpx !important;
	// }
</style>